<template>
  <div class="header">
    <el-menu :default-active="activeIndex" mode="horizontal" :ellipsis="false" @select="onSelect">
      <el-menu-item index="index">
        <img style="width: 40px" src="https://recourse.xinzhuvip.com/study/logo.png" alt="Element logo" />
      </el-menu-item>
      <el-menu-item index="course">课程学习</el-menu-item>
      <el-menu-item index="product">材料推荐</el-menu-item>
      <el-menu-item index="company">企业学习</el-menu-item>
      <el-menu-item index="hire">人才招聘</el-menu-item>
      <el-menu-item index="posts">资讯新闻</el-menu-item>
      <el-menu-item index="live">新筑直播</el-menu-item>
      <el-menu-item index="information">资料下载</el-menu-item>
      <el-menu-item index="user">
        <div v-if="user.id"><el-text>{{user.name}}</el-text></div>
        <div v-else><el-text>登录</el-text>/<el-text>注册</el-text></div>
      </el-menu-item>
    </el-menu>

    <el-breadcrumb separator="/" class="mt30" v-if="router.currentRoute.value.meta.name != '首页'">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>{{router.currentRoute.value.meta.name}}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import router from '../router'

const activeIndex = ref('1')
const user = ref<any>({id:0,name:''})
let isuser = localStorage.getItem('user')
if(isuser){
  user.value = JSON.parse(isuser)
}

const onSelect = (name:string) => {
  if(name == 'company'){
    window.open('https://xinzhuvip.com');
    return
  }
  router.push({ name: name})
}

</script>

<style scoped>
.header{width: 1280px;margin:0px auto}
.el-menu--horizontal > .el-menu-item:nth-child(1) {
  margin-right: auto;
}
</style>
